<script setup lang="ts">
import type { VxeGridProps } from '#/adapter/vxe-table';
import type { ID } from '#/api/common';

import { nextTick, onMounted } from 'vue';

import { Page } from '@vben/common-ui';
import { $t } from '@vben/locales';
import { eachTree } from '@vben/utils';

import { Space } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { tycGroupInfo } from '#/api/company/tyc/group';
import { tycGroupMemberList } from '#/api/company/tyc/group-member';

import { groupMemberColumns } from '../details';

const props = defineProps<{ groupUuid: ID; tycCompanyId: ID }>();

const gridOptions: VxeGridProps = {
  columns: groupMemberColumns,
  // height: 'auto',
  keepSource: true,
  pagerConfig: {
    enabled: false,
  },
  expandConfig: {
    expandAll: true,
  },
  proxyConfig: {
    ajax: {
      query: async () => {
        if (!props.groupUuid) {
          return { rows: [] };
        }
        const rows = await getGroupTreeData();
        return { rows };
      },
      // // 默认请求接口后展开全部 不需要可以删除这段
      querySuccess: () => {
        // 默认全部不展开 需要加上标记
        eachTree(tableApi.grid.getData(), (item) => (item.expand = false));
        nextTick(() => {
          setExpandOrCollapse(false);
        });
      },
    },
  },
  scrollY: {
    enabled: true,
    gt: 0,
  },
  rowConfig: {
    keyField: 'id',
  },
  treeConfig: {
    parentField: 'groupUuid',
    rowField: 'id',
    // lazy: true,
    // hasChildField: 'hasChild',
    // transform: true,
    // loadMethod({ row }) {
    // 异步加载子节点
    // return loadRegionByParentCode(row.code);
    // },
  },
  id: 'company-tyc-group-index',
  showOverflow: true,
};

const [GroupTable, tableApi] = useVbenVxeGrid({
  gridOptions,
});

async function getGroupTreeData() {
  const groupInfo = await tycGroupInfo(props.groupUuid);
  const list = [];
  if (groupInfo.groupUuid) {
    const groupMemberList = await tycGroupMemberList({
      groupUuid: groupInfo.groupUuid,
    });
    list.push({
      ...groupInfo,
      cname: groupInfo.groupRename
        ? `${groupInfo.groupRename}(${groupMemberList.length})`
        : '',
      children: groupMemberList,
    });
  }
  return list;
}

/**
 * 全部展开/折叠
 * @param expand 是否展开
 */
function setExpandOrCollapse(expand: boolean) {
  eachTree(tableApi.grid.getData(), (item) => (item.expand = expand));
  if (expand) {
    tableApi.grid?.setAllTreeExpand(expand);
  } else {
    tableApi.grid?.clearTreeExpand();
  }
}

onMounted(() => {
  console.log('groupUuid', props.groupUuid);
});
</script>

<template>
  <Page :auto-content-height="true">
    <GroupTable>
      <template #table-title>
        <main-title text="集团成员列表" />
      </template>
      <template #toolbar-tools>
        <Space>
          <a-button @click="setExpandOrCollapse(false)">
            {{ $t('pages.common.collapse') }}
          </a-button>
          <a-button @click="setExpandOrCollapse(true)">
            {{ $t('pages.common.expand') }}
          </a-button>
        </Space>
      </template>
    </GroupTable>
  </Page>
</template>
